<template>
    <div>
        <!-- 基础文字 -->
        <MgsList :items="data" :idx.sync="idx" :props="{ content: 'id' }" />
        <!-- 带slot -->
        <MgsList :items="data" :idx.sync="idx">
            <span slot-scope="{ item }">{{ item.label }}</span>
        </MgsList>
        <!-- el类型 -->
        <MgsList
            :idx.sync="idx"
            :value.sync="elVal"
            :items="elData"
            tag="el-radio-group"
            comp="el-radio"
            :props="{ bind: ['label'], content: 'content' }"
        />
    </div>
</template>

<script>
import MgsList from '@mgs/components-basic/mgs-list';

export default {
    components: { MgsList },
    data() {
        return {
            idx: -1,
            data: [
                {
                    id: 1,
                    label: '一级 1',
                },
                {
                    id: 2,
                    label: '一级 2',
                },
                {
                    id: 3,
                    label: '一级 3',
                },
            ],
            elVal: -1,
            elData: [
                {
                    label: -1,
                    content: 'label-1',
                },
                {
                    label: -2,
                    content: 'label-2',
                },
                {
                    label: -3,
                    content: 'label-3',
                },
            ],
        };
    },
    watch: {
        elVal(val) {
            console.log(val);
        },
    },
};
</script>
